import React, { Component } from 'react'

class PostsForm extends Component {
    constructor(props){
        super (props);
        this.state={
            title:'',
            nody:''
        }
    }

    onChange=(e)=>{
        this.setState({
            //根据当前的事件的name和value,去更新对应的事件
            [e.target.name]:e.target.value

        })
    }

    //表达提交
    onSubmit=(e)=>{
        e.preventDefault();//阻止默认事件
        const {title,body}=this.state;
        const postData={
            title:title,
            body:body
        };
        // fetch("https://jsonplaceholder.typicode.com/posts",{
        //     method:'post',
        //     headers:{
        //         'content-type':'application/json',
        //     },
        //     body:JSON.stringify(postData)
        // })
        // .then(res=>res.json())
        // .then(res=>console.log(res));

    }

    render() {
        const {title,body}=this.state;
        return (
            <div>
                <h1>添加表单</h1>
                <form onSubmit={(event)=>this.onSubmit(event)}>
                    <div>
                        <label>title:</label>
                        <input type="text" value={title} name="title" onChange={(event)=>this.onChange(event)}></input>
                    </div>
                    <div>
                        <label>body:</label>
                        <input type="textarea"  value={body} name="body" onChange={(event)=>this.onChange(event)}></input>
                    </div>
                    <button type='submit'>添加</button>
                </form>
            </div>
        )
    }
}

export default PostsForm
